<!-- 样式-->
<style>
    table tr th, table tr td { border:1px solid #ccc; height: 30px;line-height: 30px}
</style>

<pro-header></pro-header>

<!--引入list组件-->
<nz-card [nzBordered]="false">
    <!--  form表单搜索 -->
  <form nz-form (ngSubmit)="getData('search')" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
             <div  nz-col [nzSpan]="6" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="name">环境名称</label></div>
                      <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="search.profilesName" name="profilesName"  [nzType]="'text'" [nzSize]="'large'" [nzPlaceHolder]="'环境名称'" nzId="profilesName"></nz-input>
                        </div>
                    </div>
                </div>


                
                 <div  nz-col [nzSpan]="6" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="name">环境管理人员</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="search.manager" name="manager"   [nzType]="'text'" [nzSize]="'large'" [nzPlaceHolder]="'环境管理人员'" nzId="manager"></nz-input>
                        </div>
                    </div>
                </div>

           <div  nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label>关闭环境</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select 
                                       [nzPlaceHolder]="'关闭环境'"
                                       [(ngModel)]="search.isAllowDelivery"
                                       name='isAllowDelivery'>
                                <nz-option
                                    nzLabel="已开启"
                                    nzValue="1">
                                </nz-option>
                                  <nz-option
                                    nzLabel="已关闭"
                                    nzValue="0">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>


                <div nz-col  [nzSpan]="4"  class="mb-md" [class.text-right]="expandForm">
                <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
               
            </div>
        </div>
    </form>
    <!--列表组件-->

    <app-list #child [initDate]="data"  [loading]="listloading" [isCaocuo]="isCaocuo"  [configTitle]="configTitle"  [showAdd]="showAdd" [isPagination]="isPagination"  [buttons] ='buttons' (addCreat)="addHandler($event)" (buttonData)="buttonDataHandler($event)" (pageNumber)="monitorHandler($event)"
              (deleatData)="deleatData($event)" (isActive)="isActive($event)" (buttonEvent)="buttonEvent($event)" (selectedRow)="selectedRow($event)" [headerDate]="headerDate"
               [total]="total" (getStatus)="getStatus($event)"  [pageIndex]='pageIndex'  [pageTotal] = 'pageTotal'></app-list>
</nz-card>



<nz-modal [nzVisible]="isCorrelation"  [nzWidth]="1000" [nzTitle]="Ptitle"  [nzConfirmLoading]="btnLoading" [nzContent]="correlationModal"
          (nzOnOk)="saveCorrelation('C')"  (nzOnCancel)="isCorrelation=false">
    <ng-template #correlationModal>
          <nz-tabset>
            <nz-tab *ngFor="let tab of tabs" (nzSelect)="tabChange(tab.active)">
            <ng-template #nzTabHeading>
            {{tab.name}}
            </ng-template>
            <div *ngIf="tab.active == true">
                <div nz-row [nzGutter]="24">
                    <div  nz-col [nzSpan]="24" class="mb-md">
                        <div  nz-col [nzSpan]="4" style="line-height:2;text-align:right" ><label for="status">Release分支</label></div>

                        <nz-select  nz-col [nzSpan]="20"   [(ngModel)]="branch"  (ngModelChange)="checkBranch(branch)" nzId="status" [nzPlaceHolder]="'分支类型'" [nzShowSearch]="true" [nzSize]="'large'">
                            <nz-option *ngFor="let i of branshList; let idx = index"  [nzLabel]="i.fullPath" [nzValue]="i.guid"></nz-option>
                            <nz-option *ngIf="branshList.length === 0" nzDisabled  nzLabel="当前无可用发版分支" ></nz-option>
                        </nz-select>
                 </div>
               </div>
               <div nz-row [nzGutter]="24" *ngIf='isShowDetail == true'>
            <div  nz-col [nzSpan]="24" class="mb-md">
                <div  nz-col [nzSpan]="4" style="line-height:2;text-align:right" ><label for="status">分支路径</label></div>
                <div  nz-col [nzSpan]="4" style="line-height:2;text-align:left" ><label for="status">{{branchDetali.fullPath}}</label></div>
            </div>

            <div  nz-col [nzSpan]="24" class="mb-md">
                <div  nz-col [nzSpan]="4" style="line-height:2;text-align:right" ><label for="status">当前版本</label></div>

             <div  nz-col [nzSpan]="4" style="line-height:2;text-align:left" ><label for="status">{{branchDetali.currVersion}}</label></div>
            </div>

            <div  nz-col [nzSpan]="24" class="mb-md">
                <div  nz-col [nzSpan]="4" style="line-height:2;text-align:right" ><label for="status">创建人</label></div>
                <div  nz-col [nzSpan]="4" style="line-height:2;text-align:left" ><label for="status">{{branchDetali.creater}}</label></div>
            </div>
        </div>
            </div>
             <div *ngIf="tab.active == false">
             
              <div nz-col [nzSpan]="22" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label  nz-col [nzSpan]="4"><label for="name">分支作用</label></div>
                        <div nz-form-control class="flex-1"  nz-col [nzSpan]="19" >
                            <nz-input [(ngModel)]="addBranch.branchFor" name="branchFor"   type='text' aria-required="true" [nzSize]="'large'" [nzPlaceHolder]="'分支作用说明'" nzId="branchFor"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="4"><label for="name">分支全路径</label></div>
                        <div nz-form-control class="flex-1" nz-col [nzSpan]="19">
                           
                            <nz-input [(ngModel)]="addBranch.fullPath" name="fullPath"   type='url' aria-required="true" [nzSize]="'large'" [nzPlaceHolder]="'分支全路径'" nzId="fullPath"></nz-input>
               
                        </div>
                    
                    </div>
                   
                </div>
            </div>
            </nz-tab>
            </nz-tabset>
   


    
    </ng-template>
</nz-modal>

<!--拉工程-->
<!--工程-->
<nz-modal [nzVisible]="projectInfo" [nzWidth]="1024" [nzTitle]="'工程管理'" [nzConfirmLoading]="btnLoading" [nzContent]="projectContent"
          (nzOnCancel)="projectInfo=false" (nzOnOk)="subProject()">
    <ng-template #projectContent>
              <nz-transfer
                    [nzDataSource]="list"
                    nzShowSearch
                   [nzTitles]="['可拉工程', '已选工程']"
                    [nzListStyle]="{'width.%': 45, 'height.px': 300}"
                    [nzFilterOption]="filterOption"
                    (nzSearchChange)="searchpro($event)"
                    (nzSelectChange)="select($event)"
                    (nzChange)="change($event)"
                    >
                    <ng-template #render let-item>
                    {{item.description}}
                    </ng-template>
                  
                </nz-transfer>
            </ng-template>
</nz-modal>
<nz-modal [nzVisible]="mergeVisible"  [nzWidth]="800" [nzTitle]="Ptitle"  [nzConfirmLoading]="false" [nzContent]="mergeModal"
          (nzOnCancel)="mergeVisible=false" [nzFooter]="is">
    <ng-template #mergeModal>
        <form nz-form (ngSubmit)="submitForm()" [nzLayout]="'inline'">
          
            <div nz-row [nzGutter]="24">

                <div  nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8" ><label for="status"> 环境名称</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input  [(ngModel)]="profiles.profilesName" (ngModelChange)="checkString(profiles.profilesName,1)" name="profilesName" [nzSize]="'large'" [nzPlaceHolder]="'环境名称'" ></nz-input>
                         <nz-alert  [nzType]="'warning'" nzShowIcon *ngIf='isShowprofilesName == true' nzBanner [nzMessage]="'请勿输入特殊字符！'"></nz-alert>
                        
                        </div>
                    </div>
                </div>

              

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">主机IP</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.hostIp" name="hostIp" [nzSize]="'large'" (ngModelChange)="checkIp(profiles.hostIp)" [nzPlaceHolder]="'请输入该环境部署服务的IP'" nzId="hostIp"></nz-input>
                            <nz-alert *ngIf='isShowIp == true' [nzType]="'warning'"  nzMessage="你输入的IP地址不合法！" nzShowIcon></nz-alert>
                        </div>
                    </div>
                </div>

                
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">流水标识</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.serialTag" name="serialTag" [nzSize]="'large'" (ngModelChange)="checkserialTag(profiles.serialTag)" [nzPlaceHolder]="'请输入该环境部署服务的流水标志'" nzId="serialTag"></nz-input>
                            <nz-alert *ngIf='isShowserialTag == true' [nzType]="'warning'"  nzMessage="流水标识只能用一位数字或大小写字母" nzShowIcon></nz-alert>
             
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">  安装路径</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.installPath" name="installPath" (ngModelChange)="checkString(profiles.installPath,2)" [nzSize]="'large'" [nzPlaceHolder]="'请输入该环境在服务器上的安装路径'" nzId="installPath"></nz-input>
                         <nz-alert  [nzType]="'warning'" nzShowIcon *ngIf='isShowinstallPath == true' nzBanner [nzMessage]="'请勿输入特殊字符！'"></nz-alert>

                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">版本密码</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.csvPwd" name="csvPwd" [nzSize]="'large'" [nzPlaceHolder]="'版本密码'" nzId="csvPwd"></nz-input>
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">版本控制用户</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.csvUser" name="csvUser" [nzSize]="'large'" [nzPlaceHolder]="'版本控制用户'" nzId="csvUser"></nz-input>
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">环境管理人员</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="profiles.manager" name="manager" [nzSize]="'large'" [nzPlaceHolder]="'请输入环境管理员'" ></nz-input>
                        </div>
                    </div>
                </div>
                  <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">ARTF</label></div>
                            <div nz-form-control class="flex-1">
            
                        <nz-input [(ngModel)]="profiles.artf" nzAutosize=true  (ngModelChange)="checkArtf(profiles.artf)"  name="artf" [nzSize]="'large'" [nzPlaceHolder]="'请输入ARTF'"
                                  nzId="artf"></nz-input>
                                  <nz-alert *ngIf='isShowartf == true' [nzType]="'warning'"   nzMessage="只能输入数字类型" nzShowIcon></nz-alert>
                                    
                        </div>
              
                    </div>
                </div>


   


                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label nz-col [nzSpan]="8"><label for="name">打包窗口</label></div>
                        <div nz-form-control class="flex-1">
                            <!--<nz-checkbox-group [(ngModel)]="profiles.checkOptionsOne"  [ngModelOptions]="{standalone: true}"></nz-checkbox-group>-->
                             <!--<nz-time-picker #time [(ngModel)]="time" (ngModelChange)='' nzFormat="HH:mm"></nz-time-picker>-->
                       <nz-tag *ngFor="let tag of tags; let i = index;"
                            nzClosable="true"
                            (nzClose)="handleClose(tag)"
                            [nzColor]="tag.isOpen === 'true'?'#108ee9':''"
                            (click)='tagClick(tag)'
                            >
                            {{sliceTagName(tag.time)}}
                            </nz-tag>
                            <button nz-button *ngIf="!inputVisible"
                            [nzSize]="'large'" [nzType]="'dashed'"
                            (click)="showInput()">+ 添加窗口</button>
                            <input nz-input #input
                            *ngIf="inputVisible" type="time"
                            [(ngModel)]="inputValue"
                            style="width: 100px;"
                            (blur)="handleInputConfirm()" (keydown.enter)="handleInputConfirm()" [ngModelOptions]="{standalone: true}">
                          <nz-alert style="margin-top:10px;" nzBanner nzMessage="点击标签可控制窗口的开启与关闭，蓝色标签为开启！"></nz-alert>
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="12" [nzOffset]="10" class="mb-md" [class.text-right]="expandForm">
                    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]='btnLoading' [nzSize]="'large'">确定</button>
                    <button nz-button type="reset" (click)="mergeVisible=false" [nzSize]="'large'" class="mx-sm">取消</button>
                </div>
            </div>
        </form>
    </ng-template>
        <ng-template #is>
               </ng-template>
</nz-modal>


<!--查看分支详情-->
<nz-modal [nzVisible]="branchInfo" [nzWidth]="1024" [nzTitle]="'分支详情'" [nzConfirmLoading]="loading" [nzContent]="branchContent"
          (nzOnCancel)="branchInfo=false" (nzOnOk)="branchInfo=false" [nzFooter]="is">
    <ng-template #branchContent>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">分支类型</label></div>
                    <div nz-form-control class="flex-1">
                      
                        <nz-input [(ngModel)]="branchData.branchType" name="branchType" [nzReadonly]="'true'"  [nzSize]="'large'" [nzPlaceHolder]="'分支类型'" nzId="branchType"></nz-input>

                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">创建人</label></div>
                    <div nz-form-control class="flex-1">
                        
                        <nz-input [(ngModel)]="branchData.creater" name="creater" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'分支创建人'" nzId="creater"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">创建时间</label></div>
                    <div nz-form-control class="flex-1">
              
                        <nz-input [(ngModel)]="branchData.createTime" name="createTime" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'创建时间'" nzId="createTime"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">当前版本</label></div>
                    <div nz-form-control class="flex-1">
                          
                        <nz-input [(ngModel)]="branchData.currVersion" name="currVersion" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'当前版本'" nzId="currVersion"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">上次投产版本</label></div>
                    <div nz-form-control class="flex-1">
                         
                        <nz-input [(ngModel)]="branchData.lastVersion" name="lastVersion" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'上次投产版本'" nzId="lastVersion"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="24" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">分支全路径</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="branchData.fullPath" name="fullPath" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'分支全路径'" nzId="fullPath"></nz-input>
                    </div>
                </div>
            </div>

            <div nz-col [nzSpan]="24" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="name">分支作用说明</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="branchData.branchFor" name="branchFor" [nzReadonly]="'true'" [nzSize]="'large'" [nzPlaceHolder]="'分支作用说明'" ></nz-input>
                    </div>
                </div>
            </div>

        </div>
    </ng-template>
        <ng-template #is>
               </ng-template>
</nz-modal>


